<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" v-model="username" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
      <el-button class="ml-5" type="primary" @click="getPageData">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button @click="add" type="primary"><i style="margin-right: 5px" class="el-icon-circle-plus-outline"></i>新增</el-button>
      <el-button @click="batchDel" type="danger"><i style="margin-right: 5px" class="el-icon-remove-outline"></i>批量删除</el-button>
      <el-button type="primary"><i style="margin-right: 5px" class="el-icon-bottom"></i>导入</el-button>
      <el-button type="primary"><i style="margin-right: 5px" class="el-icon-top"></i>导出</el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="username" label="用户名" width="140"></el-table-column>
      <el-table-column prop="role" label="角色" width="140"></el-table-column>
      <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="Edit(scope.row)"><i class="el-icon-edit" style="margin-right: 5px"></i>编辑
          </el-button>
          <el-button type="danger" @click="Delete(scope.row.id)"><i class="el-icon-delete-solid" style="margin-right: 5px"></i>删除
          </el-button>
        </template>

      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
      </el-pagination>
    </div>


    <el-dialog title="用户新增" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small" :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select clearable v-model="addForm.role" placeholder="请选择角色" style="width:100%">
            <el-option v-for="item in roles" :value="item.rname" :key="item.rname" :label="item.rname"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input  v-model="addForm.password" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="addForm.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addForm.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户修改" :visible.sync="uDialogFormVisible" width="30%">
    <el-form label-width="80px" size="small" :model="addForm" :rules="rules" ref="addForm">
      <el-form-item label="用户名" prop="username">
        <el-input readonly v-model="addForm.username" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-select clearable v-model="addForm.role"   placeholder="请选择角色" style="width:100%">
          <el-option v-for="item in roles" :value="item.rname" :key="item.rname" :label="item.rname"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="addForm.nickname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="addForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="addForm.address" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="uDialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
    </div>
    </el-dialog>



  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      totalCount: 0,
      pageNum: 1,
      pageSize: 5,
      username: '',
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      uDialogFormVisible:false,
      headerBg: 'headerBg',
      roles:[],
      addForm: {
        id: '',
        username: '',
        role: '',
        password: '',
        nickname: '',
        email: '',
        phone: '',
        address: '',
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        role: [{required: true, message: '请选择角色', trigger: 'blur'}],
        password: [{required: true, message: '请输入密  码', trigger: 'blur'}],
        nickname: [{required: true, message: '请输入昵  称', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮  箱', trigger: 'blur'}],
        phone: [{required: true, message: '请输入电  话', trigger: 'blur'}],
        address: [{required: true, message: '请输入地  址', trigger: 'blur'}],
      },
    }
  },
  created() {
    // 请求分页查询数据
    this.getPageData()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPageData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getPageData()
    },
    reset() {
      this.username = "";
      this.getPageData()
    },
    add() {
      this.dialogFormVisible = true;
      this.addForm = {};
    },
    Edit(row) {
      this.addForm.id = row.id;
      this.addForm.username = row.username;
      this.addForm.nickname = row.nickname;
      this.addForm.email = row.email;
      this.addForm.phone = row.phone;
      this.addForm.address = row.address;
      this.uDialogFormVisible = true;
    },
    Delete(id) {
      this.$confirm('确定要删除该用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete("/user/deleteById/" + id).then(res => {
          if (res.code === 1000) {
            this.$message({
              type: 'info',
              message: res.data
            });
            this.getPageData()
          } else {
            this.$message({
              type: 'info',
              message: res.data
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.addForm.role == "" || this.addForm.role == null){
            this.$message("请选择角色")
            return false;
          }
          this.request.post("/user/save", this.addForm)
              .then(res => {
                if (res.code === 1000) {
                  this.$message({
                    showClose: true,
                    message: res.data,
                    type: 'success'
                  });
                  this.dialogFormVisible = false;
                  this.uDialogFormVisible = false;
                  this.getPageData()
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data,
                    type: 'error'
                  });
                  this.resetForm(formName)
                }
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 批量删除
    handleSelectionChange(val) {
      this.multipleSelection = [];
      this.multipleSelection = val;
    },
    batchDel() {
      // 下面这一句是将multipleSelection中的每一行的对象转换成纯id的数组
      let ids = this.multipleSelection.map(val => val.id)


      this.$confirm('确定要删除这些用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.post("/user/batchDelete", ids)
            .then(res => {
              if (res.code === 1000) {
                this.$message({
                  showClose: true,
                  message: res.data,
                  type: 'success'
                });
              }
              this.getPageData()
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    // 获取分页查询数据
    getPageData() {
      this.request.get("/user/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
        }
      })
          .then(res => {
            this.tableData = []
            this.tableData = res.data.data
            this.totalCount = res.data.totalCount
          })


      this.request.get("/role/findAll", {})
      .then(res => {
        this.roles = []
        this.roles = res.data;
      })
    }
  }
}
</script>


<style>
.headerBg {
  background: #eee !important;
}
</style>